<template>
	<view class="cu-modal bottom-modal" :class="{'show':isShow}" @click="hide">
	  <view class="cu-dialog">
			<view class="goods-data">
				<view class="thumb">
					<image  v-if="SizeList.img" :src="imgUrl ? imgUrl : SizeList.img[0]" mode=""></image>
				</view>
				<view class="item">
					<view class="title">
						<text></text>
					</view>
					<view class="price">
						<text class="min">￥</text>
						<text class="max">{{SizeList.price}}</text>
						<!-- <text class="min">.00</text> -->
					</view>
					<view class="inventory">
						<text>库存：{{SizeList.stock}}</text>
					</view>
				</view>
			</view>
			<view class="attr-size">
				<view class="attr-list" v-for="(item,index) in SizeList.arr" :key="index">
					<view class="title">
						<text>{{item.title}}</text>
					</view>
					<view class="size-list">
						<div class="list" v-for="(value,idx) in item.SizeList" 
						:class="{'action':idx == arrP[index]}"
						@click.stop="onAttrSize(index,idx)" :key="idx">
							<text>{{value}}</text>
						</div>
					</view>
				</view>
				<view class="attr-number" @click.stop="onStop">
					<view class="tit">数量</view>
					<!-- 数量组件 -->
					<uni-number-box :min='1' :max="100"  @change="SizeList.num = $event" :value="SizeList.num"></uni-number-box>
				</view>
			</view>
			<view class="attr-btn">
				<view class="add-cart" v-if="BuyType === 1" @click="onConfirm(BuyType)">加入购物车</view>
				<view class="add-buy" v-if="BuyType === 1" @click="onConfirm(BuyType)">立即购买</view>
				<view class="confirm" v-if="BuyType === 2" @click="onConfirm(BuyType)">确定</view>
				<view class="confirm" v-if="BuyType === 3" @click="updateConfirm(BuyType)">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';//增加/减少
	// 引入Vuex
	import { mapMutations, mapState, mapGetters } from 'vuex'
	export default {
		 components: {
			uniNumberBox,//增加/减少
		 },
		data() {
			return {
				isShow: false,//开启/关闭
				imgUrl:'',//选中图片
				BuyType: 0,
			};
		},
		computed: {
		   SizeList () {
		      return this.$store.state.SizeList
		   },
		   arrP(){
			 return this.$store.state.arrP  
		   }
		},
		methods:{
			// 0.延展mutations中的方法
			...mapMutations(['DETAIL_OBJ','MODIFY_OBJ']),
			/**
			 * 显示 
			 * @param {Number} type 1 点击选择 2 加入购物 3 立即购买
			 */
			show(type,obj1,arr){
				console.log(obj1)
				if(!!obj1){
					this.DETAIL_OBJ({obj1,arr})
				}
				this.BuyType = type;
				this.isShow = true;
			},
			hide(){
				this.isShow = false;
			},
			onStop(){
				
			},
			/**
			 * 属性选择点击
			 */
			onAttrSize(index,idx){

				this.MODIFY_OBJ({index,idx})
				if(index === 0) this.imgUrl = this.SizeList.img[idx]
			},
			/**
			 * 确认点击(加入购物车)
			 */
			onConfirm(type){
				// console.log(this.SizeList)
				// console.log(this.arrP)
				let data = Object.assign({}, this.SizeList);
				data.arr = JSON.stringify(this.arrP)
				console.log(JSON.stringify(data))
				this.$api.addGoodsToCart({
					data:JSON.stringify(data),
				}).then((res) => {
					console.log(res)
					if(res.data.success_code === 200){
						uni.showToast({
						    title: res.data.message,
						    duration: 2000
						});
						//添加缓存
						this.$cartmodel.add(this.SizeList, data.num,res=>{
							// console.log(res)
						})
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
				return;
				uni.navigateTo({
					url: '/pages/ConfirmOrder/ConfirmOrder'
				})
			},
			/**
			 * 更新购物车数据
			 */
			updateConfirm(){
				let data = Object.assign({}, this.SizeList);
				data.arr = JSON.stringify(this.arrP)
				// console.log(JSON.stringify(data))
				this.$api.updateGoodsToCart({
					data:JSON.stringify(data),
				}).then((res) => {
					// console.log(res)
					if(res.data.success_code === 200){
						this.$emit('updateCartsGoods');
						uni.showToast({
						    title: res.data.message,
						    duration: 2000
						});
						//修改缓存
						this.$cartmodel.getCartData(res=>{
							res.forEach((item,index) =>{
								if(item.goodsId === data.goodsId){
									res[index] = this.SizeList;
								}
							})
							//更新缓存
							uni.setStorageSync('uni_cart', res);
						})
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'GoodsAttr.scss';
</style>
